import { memo } from 'react'
import type { FC, ReactNode } from 'react'
import Mneu from './menu.tsx'
import ButtonMenu from './button-menu.tsx'
interface IProps {
  children?: ReactNode
  group: any
}

const GroupMenu: FC<IProps> = (props) => {
  const { group } = props
  // 使用 Object.keys() 和 forEach 遍历对象
  const menuList = Array<any>()
  Object.keys(group).forEach((key, index) => {
    menuList.push({ label: key, value: group[key], key: index + '-g' })
  })
  return (
    <div>
      {menuList.map((item) => {
        if (item.label === 'undefined') {
          return <ButtonMenu key={item.key} option={item.value[0]}></ButtonMenu>
        }
        return (
          <div key={item.key}>
            <p className={'text-xs text-primary-600 my-2 pl-2 select-none'}>
              {item.label}
            </p>
            <Mneu menuList={item.value}></Mneu>
          </div>
        )
      })}
    </div>
  )
}

export default memo(GroupMenu)
